<script setup lang="ts">
import toDo from './toDo.vue';
import {useToDoList} from '@/store/toDoList' // 加载列表
const toDoList = useToDoList()
console.log(toDoList.data)

</script>

<template>
  <ul class="toDos">
    <li v-for="toDo in toDoList.data" :key="toDo.id">
      <div>
        <toDo :toDo="toDo" :toDoList="toDoList.data"/>
      </div>
    </li>
  </ul>
</template>

<style scoped>
.toDos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  & > li {
    width: calc(100% / 3 - 1rem);
    height: 240px;
    & > div {
      width: 100%;
      height: 100%;
    }
  }
}
</style>